<template>
	<!-- 使用z-paging为根容器 -->
	<z-paging-swiper class="container">

		<!-- 固定在顶部的导航栏 -->
		<template #top>
			<view v-if="isLoggedIn">
				<view class="header">
					<image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
				</view>

				<!-- 用户信息部分 -->
				<view class="bottom-sheet">
					<view class="avatar-container">
						<image class="avatar" :src="userInfo.avatar" mode="aspectFill"></image>
						<image class="settings-icon" src="/static/setting.png" @click="goToSettings"></image>
					</view>


					<view class="user-info">
						<text class="username">{{ userInfo.nickname }}</text>
						<text class="user-id">ID: {{ userInfo.id }}</text>
						<text class="bio">{{ userInfo.bio ? userInfo.bio : "这个人很懒，还没写简介" }}</text>

						<view class="user-age-info">
							<image class="icon-man"
								:src="userInfo.gender === '女' ? '/static/woman_pink.png' : '/static/man_blue.png'">
							</image>
							<text class="age">{{ userInfo.age }}</text>
							<text class="vertical-divide-1">|</text>
							<text class="star-sign">{{ userInfo.constellation }}</text>
							<text class="vertical-divide-2">|</text>
							<text class="position">{{ userInfo.address }}</text>
						</view>

						<view class="stats">
							<view class="stat-item">
								<text class="stat-value">{{ userInfo.postCount }}</text>
								<text class="stat-label">动态</text>
							</view>
							<view class="stat-item" @click="goToFollowList">
								<text class="stat-value">{{ userInfo.followCount }}</text>
								<text class="stat-label">关注</text>
							</view>
							<view class="stat-item" @click="goToFansList">
								<text class="stat-value">{{ userInfo.fansCount }}</text>
								<text class="stat-label">粉丝</text>
							</view>
							<view class="stat-item">
								<text class="stat-value">{{ userInfo.loveCollectCount }}</text>
								<text class="stat-label">获赞与收藏</text>
							</view>
						</view>
					</view>
				</view>
				<view class="divider-line"></view> <!-- 新增的分隔线元素 -->
			</view>

			<view v-else>
				<!-- 未登录状态的页面内容 -->
				<view class="header">
					<image class="bg-image" src="/static/bg.jpg" mode="aspectFill"></image>
				</view>

				<view class="bottom-sheet">
					<view class="avatar-container-notLogin" @click="login">
						<image class="avatar-notLogin" src="/static/notLoginIcon.jpg" mode="aspectFill"></image>
					</view>
					<text class="login-text" @click="login">点击登录</text>
					<text class="login-desc" @click="login">开启你的schoolwalk旅程吧</text>
				</view>
			</view>
		</template>
		<z-tabs ref="tabs" :list="tabList" :current="current" @change="tabsChange" v-if="isLoggedIn" />
		<!-- z-paging 分页内容 -->
		<swiper class="swiper" :current="current" @transition="swiperTransition"
			@animationfinish="swiperAnimationfinish">
			<swiper-item class="swiper-item" v-for="(item, index) in tabList" :key="index">
				<!-- 每个标签页对应的内容 -->
				<line_itemVue ref="listItem"  :tabIndex="index" :currentIndex="current"
					:dataList="postDataList"></line_itemVue>
			</swiper-item>
		</swiper>
	</z-paging-swiper>
</template>

<script>
	import {
		getUserInfo
	} from '@/api/user.js'; // 引入登录接口
	import line_itemVue from '../../components/swipe-list-item/line_item.vue';
	export default {
		components: {
			line_itemVue
		},
		data() {
			return {
				isLoggedIn: false, // 登录状态
				isSelfPage: true, // 用于判断是否为用户自己的主页
				userInfo: {}, // 存储用户信息
				postDataList: [], //列表信息
				tabList: ['我的', '收藏', '赞过'],
				current: 0, // 当前选择的tab index
			};
		},
		onShow() {
			// 在页面onShow的时候，刷新当前列表（不是必须的）
			this.$refs.listItem && this.reloadCurrentList();
			if (getApp().globalData.userInfo == "") { // 未登录就不获取用户信息
				return
			}
			// 获取用户信息
			this.fetchUserInfo();
		},
		methods: {
			followUser() {
				// 处理关注用户逻辑
			},
			startChat() {
				// 导航到聊天页面
				uni.navigateTo({
					url: '/path/to/chatPage'
				});
			},

			fetchUserInfo() {

				const userInfoString = uni.getStorageSync('userInfo')
				if (!userInfoString) {
					this.isLoggedIn = false;
					return
				}
				const userInfo = JSON.parse(userInfoString);
				console.log("fetchUserInfo :userInfo ", userInfo)
				if (userInfo) {
					getUserInfo() // 发送获取用户信息的请求
						.then(response => {
							// 更新用户信息和登录状态
							if (response.code == 200) {
								this.userInfo = response.data; // 假设接口返回的数据中有用户信息
								this.isLoggedIn = true; // 设置为已登录
								this.postDataList = response.data.postHomeList.list;
								const userId = uni.getStorageSync('userId');
								if (!userId) {
									uni.setStorageSync('userId', this.userInfo.id);
								}
					
							} else {
					
							}
						})
						.catch(error => {
							console.error('获取用户信息失败:', error);
							this.isLoggedIn = false; // 处理失败情况
						});

				} else {
					this.isLoggedIn = false; // 处理失败情况
				}



				// getUserInfo() // 发送获取用户信息的请求
				// 	.then(response => {
				// 		// 更新用户信息和登录状态
				// 		if (response.code == 200) {
				// 			this.userInfo = response.data; // 假设接口返回的数据中有用户信息
				// 			this.isLoggedIn = true; // 设置为已登录
				// 			this.postDataList = response.data.postHomeList.list;
				// 			const userId = uni.getStorageSync('userId');
				// 			if (!userId) {
				// 				uni.setStorageSync('userId', this.userInfo.id);
				// 			}

				// 		} else {

				// 		}
				// 	})
				// 	.catch(error => {
				// 		console.error('获取用户信息失败:', error);
				// 		this.isLoggedIn = false; // 处理失败情况
				// 	});
			},
			// 点击后跳转到登录页面
			login() {
				uni.navigateTo({
					url: '/packageLogin/pages/login/login'
				});
			},
			// tabs 切换后触发swiper同步切换
			tabsChange(index) {
				this.current = index;
			},
			// swiper 过渡事件处理
			swiperTransition(e) {
				this.$refs.tabs.setDx(e.detail.dx);
			},
			// swiper滑动结束更新tabs和当前index
			swiperAnimationfinish(e) {
				this.current = e.detail.current;
				this.$refs.tabs.unlockDx();
			},
			// 如果要通知当前展示的z-paging刷新，请调用此方法
			reloadCurrentList() {
				this.$refs.listItem[this.current].reload();
			},
			goToFollowList() {
				// 跳转到关注列表页面
				uni.navigateTo({
					url: '/packageMixture/pages/fans/fans?type=follow'
				});
			},
			goToFansList() {
				// 跳转到粉丝列表页面
				uni.navigateTo({
					url: '/packageMixture/pages/fans/fans?type=fans'
				});
			},
			    goToSettings() {
			        uni.navigateTo({
			            url: '/packageMixture/pages/setting/setting'
			        });
			    },
		}
	}
</script>

<style>
	.container {
		display: flex;
		flex-direction: column;
		height: 100vh;
		/* 使容器占满整个视口高度 */
		background-color: #ffffff;
	}

	.header {
		height: 200px;
		/* 固定头部高度 */
	}

	.actions {
		display: flex;
		gap: 8px;
	}

	.follow-button,
	.chat-button {
		background-color: #007aff;
		color: #fff;
		padding: 5px 10px;
		border-radius: 5px;
	}

	.bg-image {
		width: 100%;
		height: 100%;
	}

	.bottom-sheet {
		position: relative;
		background-color: #ffffff;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		padding: 15px;
		margin-top: -20px;
		/* 使其看起来和header有连接 */
	}

	.avatar-container {
		display: flex;
		/* 使用 flex 布局 */
		align-items: center;
		/* 垂直居中对齐 */
		position: absolute;
		top: -50px;
		left: 20px;
		gap: 440rpx;
		/* 设置头像和设置按钮之间的间距 */
	}

	.avatar {
		width: 100px;
		height: 100px;
		border-radius: 50%;
	}

	.settings-icon {
		width: 20px;
		/* 设置按钮的宽度 */
		height: 20px;
		/* 设置按钮的高度 */
		cursor: pointer;
		/* 鼠标悬停时显示为手形 */
		margin-top: 80rpx;
	}

	.avatar-container-notLogin {
		position: absolute;
		width: 100px;
		height: 100px;
		display: flex;
		/* 使用 Flex 布局 */
		align-items: center;
		/* 垂直居中 */
		justify-content: center;
		/* 水平居中 */
		border-radius: 50%;
		background-color: #D9D9D9;
		top: -50px;
		left: 20px;
	}

	.avatar-notLogin {
		width: 50px;
		height: 50px;
		border-radius: 50%;
	}

	.user-info {
		display: flex;
		flex-direction: column;
		padding-top: 90rpx;
	}

	.username {
		font-size: 24px;
		font-weight: bold;
	}

	.user-id,
	.bio {
		font-size: 14px;
		color: #666;
		margin-top: 5px;
	}

	.divider-line {
		height: 2px;
		background-color: lightgray;
		/* 设置分隔线颜色 */
	}

	.stats {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
	}

	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.stat-value {
		font-size: 18px;
		font-weight: bold;
	}

	.stat-label {
		font-size: 12px;
		color: #666;
	}

	.swiper {
		height: 100%;
	}

	.icon-man,
	.edit-info {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.age,
	.star-sign {
		line-height: 20px;
	}

	.position {
		margin-right: 10px;
	}

	.vertical-divide-1,
	.vertical-divide-2 {
		color: darkgray;
		margin: 0 5px;
	}

	.user-age-info {
		display: flex;
		align-items: flex-end;
		margin-top: 10px;
	}

	/* 未登录页面的样式 */
	.login-text {
		position: absolute;
		left: 32rpx;
		top: 100rpx;
		font-size: 34rpx;
		color: #181818;
	}

	.login-desc {
		position: absolute;
		left: 34rpx;
		top: 160rpx;
		font-size: 24rpx;
		color: #ACACAC;
	}
</style>